<template>
  <div>
    <h2>我是app.vue</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <p>{{ msg }}</p>

    <!-- 使用组件：写一个组件名的标签即可 -->
    <mySon />

    <!-- 用组件的时候，也支持把驼峰给拆出来 -->
    <!-- 拆出来了就不要大写了 -->
    <my-son />

    <ul>
      <!-- 不是真的报错，只是vscode里的一个语法检查报错 -->
      <!-- 因为这种写法是不规范的写法，规范写法是要加:key -->
      <!-- 解决办法1： 把这个规范检查关了（不推荐） -->
      <!-- <li v-for="item in list">{{ item }}</li> -->

      <!-- key只能给字符串或者给数字 -->
      <!-- key的值建议有id给id（唯一值），没id给下标 -->
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>

    <panel />

    <panel />
  </div>
</template>

<script>
// 导入组件的语法
import mySon from "./components/mySon";
import panel from "./components/panel";

export default {
  // 注册子组件的语法
  components: {
    // 注册mySon这个组件
    mySon,
    panel,
    // 完整写法是：
    // mySon: mySon
    // 把mySon这个组件给改名，改名成xx
    // 所以改名后，用组件就要用 <xx /> 写法
    // xx: mySon
  },
  data() {
    return {
      msg: "hello",
      list: [{ name: "a" }, { name: "b" }, { name: "c" }],
    };
  },
};
</script>

<style>
</style>